import { EditOutlined } from '@ant-design/icons'
import { connect } from 'dva'
import { useEffect, useState } from 'react'

import { getEntrancesListByTypeApi } from '@/api/app'
import { saveOrUpdateApi } from '@/api/sys/organization'
import AekButton from '@/components/AekButton'
import AekForm from '@/components/AekForm'
import AekSpin from '@/components/AekSpin'
import APanel from '@/components/APanel'
import PageLayout from '@/components/PageLayout'
import { namespace } from '@/models/sys/personalCenter'
import { message } from '@/utils/antdHelper'
import { getBasicFn } from '@/utils/dvaUtil/index'
import { requestWithTry } from '@/utils/request'

import EditModal from './components/EditModal'

/** 个人中心 */
const Index = ({ modelState, loading }) => {
  const [form] = AekForm.useForm()
  const { userInfo } = modelState
  const { toAction, getLoading } = getBasicFn({ namespace, loading })
  const [detail, setDetail] = useState({})

  useEffect(() => {
    if (!userInfo) return
    const formDetail = {
      fullName: userInfo.fullName,
      departmentNames: `${userInfo.organizationName}/${userInfo.departmentNames?.join('/')}`,
      jobNumber: userInfo.jobNumber,
      userName: userInfo.userName,
      mobileNumber: userInfo.mobileNumber,
      password: '******',
      entranceId: userInfo.entranceId,
    }
    setDetail(formDetail)
    form.setFieldsValue(formDetail)
  }, [userInfo])

  const save = async () => {
    const { entranceId, fullName, jobNumber } = await form.validateFields()
    const params = {
      id: userInfo.id,
      fullName,
      jobNumber,
      entranceId,
    }
    await requestWithTry(saveOrUpdateApi, params)
    message.success('保存成功')
    toAction('orgUserProfileApi')
  }

  const edit = async row => {
    await EditModal.PromiseThen({
      row,
    })
    message.success('修改成功')
    toAction('orgUserProfileApi')
  }

  /** @type {import("@/components/AekForm").FormDataProps[]} */
  const formData = [
    <APanel key='1' className='ml-30px' title='个人资料' />,
    {
      field: 'fullName',
      label: '姓名',
      formItemProps: {
        rules: [{ required: true }],
      },
      component: { name: 'Input' },
    },
    {
      field: 'departmentNames',
      label: '组织架构',
      component: { name: 'Input' },
      view: true,
    },
    {
      field: 'jobNumber',
      label: '工号',
      component: { name: 'Input' },
    },
    <APanel key='2' className='ml-30px' title='账号信息' />,
    {
      field: 'userName',
      label: '用户名',
      component: { name: 'Input' },
      view: true,
    },
    {
      field: 'mobileNumber',
      label: '手机号',
      component: { name: 'Input' },
      view: true,
    },
    {
      field: 'password',
      label: '密码',
      component: { name: 'InputPassword' },
      view: true,
      viewRender: text => (
        <>
          <span>{text}</span>
          <AekButton type='link' onClick={edit}>
            <EditOutlined />
          </AekButton>
        </>
      ),
    },
    <APanel key='3' className='ml-30px' title='其它信息' />,
    {
      field: 'entranceId',
      label: '默认登录系统',
      component: {
        name: 'AekSelect',
        props: {
          api: getEntrancesListByTypeApi,
          fieldNames: {
            value: 'entranceId',
            label: 'entranceName',
          },
        },
      },
    },
  ]

  return (
    <PageLayout className='pt-20px!'>
      <AekSpin spinning={getLoading('orgUserProfileApi')}>
        <AekForm form={form} formData={formData} detail={detail} layout={['150px', '0.8']} />
        <AekButton type='primary' onClick={save} className='mt-40px mx-auto flex'>
          保存
        </AekButton>
      </AekSpin>
    </PageLayout>
  )
}

export default connect(store => ({
  modelState: store[namespace],
  loading: store.loading,
}))(Index)
